<style scoped>
.layui-form>>>.layui-form-select {
    z-index: inherit;
}

.noborder {
    border: none;
}
</style>

<template>
<div class="company">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>添加销售计划</legend>
    </fieldset>

    <form class="layui-form ">
        <!-- <div class="layui-input-inline">
            <input type="text" class="layui-input" id="monthly" placeholder="计划月份">
        </div> -->
        <div class="layui-form-item">
            <label class="layui-form-label">计划月份</label>
            <div class="layui-input-block">
                <input type="text"  style="width:200px" class="layui-input" id="monthly" placeholder="计划月份" autocomplete="off">
            </div>
        </div>
        <table class="layui-table layui-form">

            <thead>
                <tr>
                    <th>部门</th>
                    <!-- <th>月份</th> -->
                    <th>重量</th>
                </tr>
            </thead>
            <tbody>
                <tr class="id9" v-for="(val, index) in departments" :key="index">
                    <td>
                        <input type="text" class="layui-input noborder" :name="'plans[' + index + '].depart'" readonly :value="val.name" />
                        <input type="hidden" :name="'plans[' + index + '].departid'" :value="val.guid" />
                    </td>
                    <!-- <td><input type="number" class="layui-input noborder" :name="'plans[' + index + '].monthly'" lay-verify="required" /></td> -->
                    <td><input type="text" class="layui-input noborder" :name="'plans[' + index + '].weight'" lay-verify="required" /></td>
                </tr>
            </tbody>
        </table>

        <!--            <div class="layui-form-item">-->
        <!--                <label class="layui-form-label">月度</label>-->
        <!--                <div class="layui-input-block">-->
        <!--                    <input type="text" name="monthly" id="monthly" lay-verify="required" placeholder="请输入月度" autocomplete="off" class="layui-input">-->
        <!--                </div>-->
        <!--            </div>-->

        <!--            <div class="layui-form-item">-->
        <!--                <label class="layui-form-label">部门</label>-->
        <!--                <div class="layui-input-inline">-->
        <!--                    <input type="hidden" name="depart" id="depart">-->
        <!--                    <select name="departid" lay-verify="required" id="departid" lay-filter="departid">-->
        <!--                        <option value="">请选择部门</option>-->
        <!--                        <option v-for="(item, index) in departments" :value="item.guid" :key="index" >{{item.name}}</option>-->
        <!--                    </select>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--            <div class="layui-form-item">-->
        <!--                <label class="layui-form-label">重量</label>-->
        <!--                <div class="layui-input-inline">-->
        <!--                   <input type="text" name="weight" lay-verify="required" placeholder="请输入重量" autocomplete="off" class="layui-input">-->
        <!--                </div>-->
        <!--            </div>-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
                <button class="layui-btn layui-btn-primary" @click="$parent.back">返回</button>
            </div>
        </div>
    </form>
</div>
</template>

<script>
export default {
    name: 'AddSalePlan',

    data() {
        return {
            departments: [],
            item: {},
            plans: '',
            data: {},
            list: []
        }
    },
    mounted() {

        this.loadDepart();
        this.getDepartName()
        //this.getCurrencyEmnu();
        let that = this;

        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#monthly', //指定元素
                format: 'yyyy-MM'
            });

        });

        layui.use(['form'], function () {
            var form = layui.form,
                layer = layui.layer;
            form.render();

            form.on('submit(submit)', function (fdata) {
                //循环数据
                that.departments.forEach(function (item, index) {
                    let a = $("#monthly").val()
                    console.log("plans[" + index + "].monthly:" + a) //拼接字符型
                     //向对象中添加数据
                    let key="plans[" + index + "].monthly"
                    let value = a
                    fdata.field[key]=value
                });
                let loader = layer.load();
                $.ajax({
                    url: '/sales/Saleplan!save2.action',
                    data: fdata.field,
                    type: "post",
                    dataType: "json",
                    success: function (res) {
                        console.log("save", res)
                        if (res.info == "ok") {
                            that.toastSuccess("添加成功");
                            that.$parent.switchPage('SalesPlan');
                        } else {
                            that.toastText(res.info);
                        }
                    },
                    complete: function () {
                        layer.close(loader);
                    }
                });
                return false;
            });
        });
    },

    updated: function () {
        layui.form.render('select');
        layui.form.render();

    },
    methods: {
        getDepartName: function () {
            var form = layui.form,
                layer = layui.layer;
            form.on('select(departid)', function (data) {
                $("#depart").val(data.elem[data.elem.selectedIndex].text)
            })
        },

        loadDepart() {
            var that = this;
            $.ajax({
                url: '/sales/Department!listAll.action',
                type: "post",
                dataType: "json",
                data: {
                    status: 1,
                    flag: 1
                },
                success: function (res) {
                    if (res.info != 'error') {
                        that.departments = res.info;
                        //layui.form.render("select");
                    } else {
                        that.toast("获取部门数据失败");
                    }
                },
                complete: function () {

                }
            });
        }
    }
}
</script>
